<template>
    <div class="qingwu">
        <div class="admin_table_page_title">
            <a-button @click="$router.back()" class="float_right" icon="arrow-left">返回</a-button>
            方案 {{type}}
        </div>
        <div class="unline underm"></div>
        <div class="admin_form">
            <a-form-model :label-col="{ span: 2 }" :wrapper-col="{ span: 12 }">
                <a-form-model-item label="* 方案标题 :">
                    <a-input v-model="info.plan_title"></a-input>
                </a-form-model-item>

                <a-form-item label="描述">
                    <wang-editor :contents="info.description" @goods_content="goods_content_fun"/>
                    <!--<a-input v-model="info.remarks" type="textarea" />-->
                </a-form-item>

                <a-form-model-item v-if="info.fee_type !=3 && addType !=3" label="* 计费方式 :">
                    <a-radio-group v-if="addType >= 1" v-model="info.billing_method"
                                   :default-value="info.billing_method">
                        <a-radio :value="1">单费率</a-radio>
                        <a-radio :value="2">阶梯价格</a-radio>
                        <a-radio v-if="info.fee_type ==1 || addType ==1" :value="3">复费率</a-radio>
                    </a-radio-group>

                    <a-radio-group v-else-if="addType ==  0" disabled v-model="info.billing_method"
                                   :default-value="info.billing_method">
                        <a-radio :value="1">单费率</a-radio>
                        <a-radio :value="2">阶梯价格</a-radio>
                        <a-radio v-if="info.fee_type ==1 || addType ==1" :value="3">复费率</a-radio>
                    </a-radio-group>
                </a-form-model-item>

                <a-form-model-item v-if="info.billing_method ==1 && addType !=3 && info.fee_type !=3" label="* 第一档价格 :"
                                   :wrapper-col="{ span: 5 }">
                    <a-input v-model="info.first_price" placeholder=""></a-input>
                </a-form-model-item>


                <a-form-model-item v-if="info.fee_type ==3 || addType ==3" label="缴费月份 :" :wrapper-col="{ span: 5 }">
                    <a-checkbox-group v-model="charging_months">
                        <a-row>
                            <a-col :span="5">
                                <a-checkbox value="0">
                                    每月
                                </a-checkbox>
                            </a-col>
                            <a-col :span="5">
                                <a-checkbox value="1">
                                    1月
                                </a-checkbox>
                            </a-col>
                            <a-col :span="5">
                                <a-checkbox value="2">
                                    2月
                                </a-checkbox>
                            </a-col>
                            <a-col :span="5">
                                <a-checkbox value="3">
                                    3月
                                </a-checkbox>
                            </a-col>
                            <a-col :span="5">
                                <a-checkbox value="4">
                                    4月
                                </a-checkbox>
                            </a-col>
                            <a-col :span="5">
                                <a-checkbox value="5">
                                    5月
                                </a-checkbox>
                            </a-col>
                            <a-col :span="5">
                                <a-checkbox value="6">
                                    6月
                                </a-checkbox>
                            </a-col>
                            <a-col :span="5">
                                <a-checkbox value="7">
                                    7月
                                </a-checkbox>
                            </a-col>
                            <a-col :span="5">
                                <a-checkbox value="8">
                                    8月
                                </a-checkbox>
                            </a-col>
                            <a-col :span="5">
                                <a-checkbox value="9">
                                    9月
                                </a-checkbox>
                            </a-col>
                            <a-col :span="5">
                                <a-checkbox value="10">
                                    10月
                                </a-checkbox>
                            </a-col>
                            <a-col :span="5">
                                <a-checkbox value="11">
                                    11月
                                </a-checkbox>
                            </a-col>
                            <a-col :span="5">
                                <a-checkbox value="12">
                                    12月
                                </a-checkbox>
                            </a-col>
                        </a-row>
                    </a-checkbox-group>
                </a-form-model-item>
                <a-form-model-item v-if="info.fee_type ==3 || addType ==3" label="* 单价 :" :wrapper-col="{ span: 5 }">
                    <a-input v-model="info.unit_price" placeholder=""></a-input>
                </a-form-model-item>

                <a-form-model-item v-if="info.billing_method ==2 && addType !=3 && info.fee_type !=3" label="阶梯价格">
                </a-form-model-item>
                <div v-for="(val,k) in step_price">
                    <a-form-model-item v-if='info.billing_method ==2 && addType !=3 && info.fee_type !=3' :label="val.tit
" :wrapper-col='{ span: 15 }'>
                        <a-input-group size='large'>
                            <a-row :gutter='25'>
                                <a-col :span='7'>
                                    <a-input v-model="step_price[k].minimum_amount" placeholder='最低用量'></a-input>
                                </a-col>
                                <a-col :span='7'>
                                    <a-input v-model="step_price[k].maximum_amount" placeholder='最高用量'></a-input>
                                </a-col>
                                <a-col :span='7'>
                                    <a-input v-model="step_price[k].unit_price" placeholder='价格'></a-input>
                                </a-col>
                                <a-col :span='5' v-if='k > 0'>
                                    <a-button @click="remove(k)">删除</a-button>
                                </a-col>
                            </a-row>
                        </a-input-group>
                    </a-form-model-item>

                </div>

                <a-form-model-item v-if="info.billing_method ==2 && addType !=3 && info.fee_type !=3" label="添加阶梯">
                    <a-button @click="addcj" :span='20'>添加</a-button>
                </a-form-model-item>


                <a-form-model-item v-if=" info.billing_method ==3 && info.fee_type !=3 && addType !=3" label="* 费率1:"
                                   :wrapper-col="{ span: 5 }">

                    <a-time-picker :default-value="moment(double_rate[0].time_period[0], 'HH:mm:ss')" @change="on_time_period($event,0,0)"/>
                    <a-time-picker :default-value="moment(double_rate[0].time_period[1], 'HH:mm:ss')" @change="on_time_period($event,0,1)"/>
                    <a-input v-model="double_rate[0].rate_price" placeholder="尖"></a-input>

                </a-form-model-item>

                <a-form-model-item v-if=" info.billing_method ==3 && info.fee_type !=3 && addType !=3" label="* 费率2:"
                                   :wrapper-col="{ span: 5 }">

                    <a-time-picker :default-value="moment(double_rate[1].time_period[0], 'HH:mm:ss')" @change="on_time_period($event,1,0)"/>
                    <a-time-picker :default-value="moment(double_rate[1].time_period[1], 'HH:mm:ss')" @change="on_time_period($event,1,1)"/>

                    <a-input v-model="double_rate[1].rate_price" placeholder="峰"></a-input>

                </a-form-model-item>
                <a-form-model-item v-if=" info.billing_method ==3 && info.fee_type !=3 && addType !=3" label="* 费率3:"
                                   :wrapper-col="{ span: 5 }">

                    <a-time-picker :default-value="moment(double_rate[2].time_period[0], 'HH:mm:ss')" @change="on_time_period($event,2,0)"/>
                    <a-time-picker :default-value="moment(double_rate[2].time_period[1], 'HH:mm:ss')" @change="on_time_period($event,2,1)"/>

                    <a-input v-model="double_rate[2].rate_price" placeholder="平"></a-input>

                </a-form-model-item>
                <a-form-model-item v-if=" info.billing_method ==3 && info.fee_type !=3 && addType !=3" label="* 费率4:"
                                   :wrapper-col="{ span: 5 }">

                    <a-time-picker :default-value="moment(double_rate[3].time_period[0], 'HH:mm:ss')" @change="on_time_period($event,3,0)"/>
                    <a-time-picker :default-value="moment(double_rate[3].time_period[1], 'HH:mm:ss')" @change="on_time_period($event,3,1)"/>

                    <a-input v-model="double_rate[3].rate_price" placeholder="谷"></a-input>

                </a-form-model-item>


                <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
                    <a-button type="primary" @click="handleSubmit">提交</a-button>
                </a-form-model-item>

            </a-form-model>

        </div>
    </div>
</template>

<script>
    import wangEditor from "@/components/wangeditor"
    import moment from 'moment';

    export default {
        components: {wangEditor},
        props: {},
        data() {
            return {
                info: {},
                id: 0,
                community_lists: [],    // 小区列表
                default_community_id: '请选择小区',   // 默认
                charging_months: [],//月份
                step_price: [],
                step_price_json: [],
                jt: 0,
                type: '编辑',
                addType: 0,
                double_rate:[
                        ]



            };
        },
        watch: {
        },
        computed: {},
        methods: {
            moment,
            handleSubmit() {
                // 验证代码处
                if (this.$isEmpty(this.info.plan_title)) {
                    return this.$message.error('方案标题不能为空');
                }
                var step_price = this.step_price;
                for (var $i = 0; $i < step_price.length; $i++) {

                    delete step_price[$i]['tit'];

                }
                var double_rate = this.double_rate;
                for (var $d = 0; $d < double_rate.length; $d++) {

                    double_rate[$d].time_period=double_rate[$d].time_period[0]+" - "+double_rate[$d].time_period[1]

                }

                this.info['step_price_json'] = JSON.stringify(step_price)
                this.info['double_rate_json'] = JSON.stringify(double_rate)
                // let api = this.$apiHandle(this.$api.adminUsers,this.id);
                // if(api.status){
                if (this.type != '编辑') {
                    this.info.fee_type = this.addType
                }
                this.$post(this.$api.editEditChargingSchemeInfo, this.info).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        return this.$router.back();
                    } else {
                        return this.$message.error(res.msg)
                    }
                })
            },


            get_info() {
                this.$get(this.$api.editChargingScheme + '/' + this.id).then(res => {
                    res.data.password = undefined;
                    this.charging_months = res.data.charging_months.split(',');
                    if (res.data.billing_method == 2) {
                        var step_price = JSON.parse(res.data.step_price_json);
                        this.cj(step_price);

                    } else if (res.data.billing_method == 3) {
                        var double_rate = JSON.parse(res.data.double_rate_json);
                        this.sj(double_rate);

                    }
                    this.info = res.data;

                    this.default_community_id = res.data.community_id;
                })
            }
            ,
            remove(key) {
                if (this.step_price.length === 1) {
                    return false;
                }

                this.step_price.splice(key, 1);
                this.cj(this.step_price);
            },
            on_time_period(d,k,y) {
                var time = String(d._d).split(" ")
                this.double_rate[k].time_period[y] = time[4]

            },
            addcj() {
                this.step_price[this.jt] = {"minimum_amount": 0, "maximum_amount": 0, "unit_price": 0};
                this.step_price.push();
                this.cj(this.step_price);
            }
            ,
            sj(double_rate) {

                console.log(this.double_rate);
                for (var $i = 0; $i < double_rate.length; $i++) {
                    this.double_rate[$i] = {};
                    this.double_rate[$i]['rate_price'] = double_rate[$i].rate_price;
                    this.double_rate[$i]['time_period'] = double_rate[$i].time_period.split(" - ");
                }


            },
            addsj() {

                for (var $i = 0; $i < 4; $i++) {
                    this.double_rate[$i] = {};
                    this.double_rate[$i]['rate_price'] = 0;
                    this.double_rate[$i]['time_period'] = {}
                    this.double_rate[$i]['time_period'][0] = '00:00:00';
                    this.double_rate[$i]['time_period'][1] = '00:00:00';
                }


            }
            ,
            cj(step_price) {
                for (var $i = 0; $i < step_price.length; $i++) {
                    var $k = $i + 1;
                    this.step_price[$i] = step_price[$i];
                    this.step_price[$i]['tit'] = "第" + ($k) + "档";
                    // console.log(this.step_price[$i])

                }
                this.jt = this.step_price.length;

            }
            ,// 编辑器内容修改
            goods_content_fun(val) {
                if (!this.platform) {
                    this.info.description = val;
                } else {
                    this.info.description_mobile = val;
                }
                this.description = val;
            },
            // 编辑器切换平台
            check_platform(status) {
                this.platform = status;
                if (!status) {
                    this.description = this.info.description ?? '';
                } else {
                    this.description = this.info.description_mobile ?? '';
                }
            },
            // 获取列表
            onload() {
                // 判断你是否是编辑
                if (this.$route.params.id.length < 8) {
                    this.id = this.$route.params.id;
                    this.get_info();
                } else {
                    this.addType = this.$route.params.id.substr(9, 1);
                    this.type = '添加';
                    this.addsj();
                }
            },

        },

        created() {
            this.onload();
            // this.getCommunityList();
        },
        mounted() {
        }
    }


</script>
<style lang="scss" scoped>

</style>
